<template>
  <div id="app">
    <div :style="sty">

      <header>
        <div class="bg">
          <div @click="bgh">设置背景</div>
          <div :class="ClassH">
            <ul class="bgul">
              <li v-for="(item,index) in bglis" @click="dd(index)">
                <div class="imgs"><img :src="item.src" alt=""></div>
                <div>背景{{index+1}}</div>
              </li>
            </ul>
          </div>
        </div>
      </header>

      <main>
        <div class="zhanghao">
          <div>
            <div @click="yong(0)" :class="this.ren==0?Classblue:''">个人用户</div>
            <div @click="yong(1)" :class="this.ren==1?Classblue:''">系统用户</div>
            <div @click="yong(2)" :class="this.ren==2?Classblue:''">注册</div>
          </div>
          <div>
            <div :class="this.ren==0?Classblock:''">
              <div class="zhmm">
                <div>
                  <span>账号：</span>
                  <input type="tel" v-model="grzhao" @blur="grhao" >
                 <!-- <span>
                      <div :class="Classzhtishi">账号错误!</div>
                    </span>-->
                </div>
                <div>
                  <span>密码：</span>
                  <input type="text" v-model="grzmima">
                 <!-- <span>
                      <div class="">账号不能为空！</div>
                      <div class="">密码错误！</div>
                    </span>-->
                </div>
              </div>
             <!-- <div class="tishi">
                <div class="">请输入账号！</div>
                <div class="">请输入密码！</div>
                <div class="">密码错误！</div>
              </div>-->
              <!-- 账号-->
              <div class="but"  @click="czhi">登录</div> <!--:class="this.zhuaninput!=''?Classbutton:''"-->
              <div class="wjmima">
                <a href="javascript:;" @click="kfu">忘记密码？</a>
              </div>
            </div>

            <div :class="this.ren==1?Classblock:''">
              <div class="zhmm">
                <div>
                  <span>账号：</span>
                  <input type="text">
                  <span>
                    <div>账号错误!</div>
                  </span>
                </div>
                <div>
                  <span>密码：</span>
                  <input type="text">
                  <span>
                    <div class="">账号不能为空！</div>
                    <div class="">密码错误！</div>
                  </span>
                </div>
              </div>
              <div class="tishi">
                <div class="">请输入账号！</div>
                <div class="">请输入密码！</div>
                <div class="">密码错误！</div>
              </div>
              <!-- 账号-->
              <div class="but">登录</div>
              <div class="wjmima">
                <a href="javascript:;" @click="kfu">忘记密码？</a>
              </div>
            </div>

            <div :class="this.ren==2?Classblock:''">
              <div class="zyi">只能注册个人账户</div>
              <div class="zhmm">
                <div>
                  <span>账号：</span>
                  <input type="text">
                  <span><div>账号已存在!</div></span>
                </div>
                <div>
                  <span>密码：</span>
                  <input type="text">
                  <span>
                      <div class="">弱</div>
                      <div class="">中</div>
                      <div class="">强</div>
                    </span>
                </div>
                <div>
                  <span>重复密码：</span>
                  <input type="text">
                  <span>
                      <div class="">密码不一致</div>
                    </span>
                </div>
                <!--<div>
                    <span>验证码：</span>
                    <input type="text">
                    <canvas id="canvas"></canvas>
                    <span>
                        <div class="">验证码不一致</div>
                    </span>
                </div>-->
              </div>
              <!-- 账号-->
              <div class="but">注册</div>
              <div class="wjmima">
                <a href="javascript:;" @click="kfu">忘记密码？</a>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';

  export default {
    name: "login",
    data() {
      return {

        grzhanghao: [
          {"gname": "tom", "gpassword": "123"},
          {"gname": "yyy", "gpassword": "123"},
          {"gname": "tyy", "gpassword": "123"},
          {"gname": "tuu", "gpassword": "123"}
        ],
        Classzhtishi: '',
        /* dd:"./images/bg/timg.jpg",*/
        tp: 'tp9',
        ff: "window.open('./top-cg.html')",
        Classbutton: 'opc',//可点击添加类
        grzhao: '',//账号
        grzmima: '',//密码
        bglis: [
          {"src": "../../static/images/bg/5ba75ead4fef2.png"},
          {"src": "../../static/images/bg/timg.jpg"},
          {"src": "../../static/images/bg/timg (1).jpg"},
          {"src": "../../static/images/bg/timg (2).jpg"},
          {"src": "../../static/images/bg/timg (3).jpg"},

          {"src": "../../static/images/bg/timg (4).jpg"},
          {"src": "../../static/images/bg/timg (5).jpg"},
          {"src": "../../static/images/bg/timg (6).jpg"},
          {"src": "../../static/images/bg/timg (7).jpg"},
          {"src": "../../static/images/bg/timg (8).jpg"},

          {"src": "../../static/images/bg/timg (9).jpg"},
          {"src": "../../static/images/bg/timg (10).jpg"},
          {"src": "../../static/images/bg/timg (11).jpg"},
          {"src": "../../static/images/bg/timg (12).jpg"},
          {"src": "../../static/images/bg/timg (13).jpg"},

          {"src": "../../static/images/bg/timg (14).jpg"},
          {"src": "../../static/images/bg/timg (15).jpg"},
          {"src": "../../static/images/bg/timg (16).jpg"},
          {"src": "../../static/images/bg/timg (17).jpg"},
          {"src": "../../static/images/bg/timg (18).jpg"},

          {"src": "../../static/images/bg/timg (19).jpg"},
          {"src": "../../static/images/bg/timg (20).jpg"},
          {"src": "../../static/images/bg/timg (21).jpg"},
          {"src": "../../static/images/bg/timg (22).jpg"},
          {"src": "../../static/images/bg/timg (23).jpg"},

          {"src": "../../static/images/bg/timg (24).jpg"},
          {"src": "../../static/images/bg/timg (25).jpg"},
          {"src": "../../static/images/bg/timg (26).jpg"},
          {"src": "../../../static/images/bg/timg (27).jpg"}
        ],
        h: 0,
        ren: 0,
        Classblue: 'blue',
        Classblock: 'block',
        ClassH: '',
        sty:"background-image:url('../../static/images/bg/timg (24).jpg');"
      }
    },
    created: function () {
      this.inquire();
    },
    methods: {
      czhi:function () {
        //把 1 传给父组件 App.vue
        this.$emit("chuangzhi",'1');

      },

      inquire:function () {

      },
      //个人账户 账户验证
      grhao: function () {

        for (var i = 0; i < this.grzhanghao.length; i++) {
          console.log(app.grzhanghao[i].gname, this.grzhao)
        }

      },
      //post请求
      /* postData:function () {
           //将数据通过 vue-resource的post方法 提交给 http://vueapi.ittun.com/api/addproduct
           var url = 'http://vueapi.ittun.com/api/addproduct';
           //调用$http.post(url,传入到服务器的请求报文体的数据，{emulateJSON:true}) 方法
           this.$http.post(url,{name:'小狮子'},{emulateJSON:true}) //发出请求
               .then(function (response) {
                   alert(response.body.message);

                   //
               });//获取服务器响应回来的数据
       },*/
      //切换背景图片
      dd: function (index) {
        Toast({  //mint-ui 提示
          message: '背景切换成功',
          position: 'bottom',
          duration: 5000
        });
        switch (index){
          case 0:
            this.sty ="background-image: url(\"../../static/images/bg/5ba75ead4fef2.png\");";
            break;
          case 1:
            this.sty ="background-image: url(\"../../static/images/bg/timg.jpg\");";
            break;
          case 2:
            this.sty ="background-image: url(\"../../static/images/bg/timg (1).jpg\");";
            break;
          case 3:
            this.sty ="background-image: url(\"../../static/images/bg/timg (2).jpg\");";
            break;
          case 4:
            this.sty ="background-image: url(\"../../static/images/bg/timg (3).jpg\");";
            break;
          case 5:
            this.sty ="background-image: url(\"../../static/images/bg/timg (4).jpg\");";
            break;
          case 6:
            this.sty ="background-image: url(\"../../static/images/bg/timg (5).jpg\");";
            break;
          case 7:
            this.sty ="background-image: url(\"../../static/images/bg/timg (6).jpg\");";
            break;
          case 8:
            this.sty ="background-image: url(\"../../static/images/bg/timg (7).jpg\");";
            break;
          case 9:
            this.sty ="background-image: url(\"../../static/images/bg/timg (8).jpg\");";
            break;
          case 10:
            this.sty ="background-image: url(\"../../static/images/bg/timg (9).jpg\");";
            break;
          case 11:
            this.sty ="background-image: url(\"../../static/images/bg/timg (10).jpg\");";
            break;
          case 12:
            this.sty ="background-image: url(\"../../static/images/bg/timg (11).jpg\");";
            break;
          case 13:
            this.sty ="background-image: url(\"../../static/images/bg/timg (12).jpg\");";
            break;
          case 14:
            this.sty ="background-image: url(\"../../static/images/bg/timg (13).jpg\");";
            break;
          case 15:
            this.sty ="background-image: url(\"../../static/images/bg/timg (14).jpg\");";
            break;
          case 16:
            this.sty ="background-image: url(\"../../static/images/bg/timg (15).jpg\");";
            break;
          case 17:
            this.sty ="background-image: url(\"../../static/images/bg/timg (16).jpg\");";
            break;
          case 18:
            this.sty ="background-image: url(\"../../static/images/bg/timg (17).jpg\");";
            break;
          case 19:
            this.sty ="background-image: url(\"../../static/images/bg/timg (18).jpg\");";
            break;
          case 20:
            this.sty ="background-image: url(\"../../static/images/bg/timg (19).jpg\");";
            break;
          case 21:
            this.sty ="background-image: url(\"../../static/images/bg/timg (20).jpg\");";
            break;
          case 22:
            this.sty ="background-image: url(\"../../static/images/bg/timg (21).jpg\");";
            break;
          case 23:
            this.sty ="background-image: url(\"../../static/images/bg/timg (22).jpg\");";
            break;
          case 24:
            this.sty ="background-image: url(\"../../static/images/bg/timg (23).jpg\");";
            break;
          case 25:
            this.sty ="background-image: url(\"../../static/images/bg/timg (24).jpg\");";
            break;
          case 26:
            this.sty ="background-image: url(\"../../static/images/bg/timg (25).jpg\");";
            break;
          case 27:
            this.sty ="background-image: url(\"../../static/images/bg/timg (26).jpg\");";
            break;
          case 28:
            this.sty ="background-image: url(\"../../static/images/bg/timg (27).jpg\");";
            break;

        }

      },
      //账号选项卡
      yong: function (x) {
        this.ren = x;
      },
      //背景点击显隐
      bgh: function () {
        if (this.h == 0) {
          this.ClassH = "hes";
          this.h = 1;
        } else {
          this.ClassH = "he";
          this.h = 0;
        }
      },
      //忘记密码
      kfu: function () {
        var d = document.querySelector(".wjmima");
        var div = document.createElement("div");//创建div节点
        var text = document.createTextNode("请咨询客服人员!");//创建文本节点
        d.appendChild(div);
        div.appendChild(text);//把文本节点放入div中
        div.className = "wj";//添加类
        console.log(div, "hh");
        setTimeout(function () {
          d.removeChild(div)
        }, 800);
      }
    }
  }
</script>

<style scoped>
  template > div {
    width: 100%
  }

  .zhmm>div>span{color: black;}
  #app>div{height: 100%;background-size: 100% 100%}
  input[type='text'],input[type='tel']{
     width: 50%;
     height: 21px;
     border-radius: 0;
  }
  .bg{
    font-size: 1rem;
    position: relative;
    height: 30px;
  }
  .bg>div:first-child{
    float: right;
    color: #05ffc7;
    margin-right: 20px;
    padding: 0 10px;
    cursor: pointer;
  }
  .bg>div:last-child.he{
    padding: 10px 10px;
    height:400px ;
    transition: all 0.5s ease;
  }
  .bg>div:last-child.hes{
    padding: 0 10px;
    height:0;
    transition: all 0.5s ease;
  }
  .bg>div:last-child{
    z-index: 3;
    overflow: hidden;
    padding:0 10px;
    overflow-y:scroll;
    height:0;
    position: absolute;
    top: 30px;
    right: 30px;
    width: 80%;
    background-color: white;
    border-radius:5px;
  }
  .bgul{
    text-align: center;
    -moz-column-count:4; /*!* Firefox *!*/
    -webkit-column-count:4; /*!* Safari 和 Chrome *!*/
    column-count:4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
  }
  .bgul>li{
    padding: 2px;
    margin: 0 0 1em 0;
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
  }
  .bgul img{width: 100%;}
  .bgul>li div{
    margin: 5px 0;
  }

  .zhanghao{
    overflow: hidden;
    width: 400px;
    margin:150px auto 0;
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    padding-bottom: 20px;
  }
  .zhanghao>div:first-child{
    display: flex;
  }
  .zhanghao>div:first-child>div:not(:last-child){
  }
  .zhanghao>div:first-child>div{
    background-color:#0e84e0;
    flex: 1;
    text-align: center;
    font-size: 16px;
    padding: 5px 0;
    color: white;
  }
  .zhanghao>div:first-child>div.blue{
    background-color: transparent;
    border-bottom: none;
    color:#0e84e0;
  }
  .zhanghao>div:last-child>div{
    display: none;
  }
  .zhanghao>div:last-child>div.block{display: block}
  .zhanghao input{
    text-align: center;
    outline: none;
    border:none;
    border-bottom: 1px solid black;
    background-color: transparent;
  }
  .zyi{text-align: center;font-size: 0.7rem;color: lightgrey;padding: 5px 0}
  .zhmm{
    margin: 20px 0;
    font-size: 1rem;
    text-align: center;
  }
  .zhmm>div{margin-bottom: 10px;position: relative}
  .zhmm>div>span:first-child{
    display: inline-block;
    text-align: right;
    width: 84px;
  }
  .zhmm>div>span:last-child{
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 12px;
    display: inline-block;
    width: 90px;
    color: red;
    background-color: white;
    border-radius: 6px;
  }
  .zhmm>div>span:last-child>div{display: none}
  .zhmm>div>span:last-child>div.zhblock{display:block}
  .tishi{
    font-size:0.8rem;
    height: 20px;
  }
  .tishi>div{
    font-size: 0.8rem;
    background-color: lightslategrey;
    border-radius: 10px;
    width: 150px;
    margin: 0 auto;
    text-align: center;
    display: none;
    line-height: 20px;
  }
  .tishi>div.dlublock{display: block}


  .zhanghao .but{
    margin: 30px auto 20px;
    background-color:#1e84e0;
    width: 55%;
    text-align: center;
    color: white;
    font-size:1rem;
    border-radius:5px;
    padding: 5px 0;
  }
  .wjmima{
    text-align: center;
    font-size: 0.8rem;
    position: relative;
  }
  .wjmima>div{
    padding: 10px 0;
    width: 100%;
    color: white;
    background-color:black;
    display: none;
  }
  .wjmima>div.wj{
    animation: kfu 2s linear forwards;
    display: block;}
  @keyframes kfu {
    from{opacity: 1;display: block;}
    to{opacity: 0;display: none;}}
</style>
